﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主页</title>
</head>

<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css" />

<body>

<a style="display:block;width:200px;height:42px;line-height:42px;font-size:18px;text-align:center;margin:40px auto;font-weight:800;" href='#' class="tbox">登录</a>

<div class="modal fade" id="myModal1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
					  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</div>
			<div class="modal-body">
					<h4 class="modal-title" align="center">登录框</h4>
					<br/>
					<form class="form-horizontal" role="form" method="POST">
						<div class="form-group">
							<label for="name" class="col-sm-offset-2 col-sm-2 control-label"></label>
                                {{ form.csrf_token }}
							<div class="col-sm-5">
                                    {{ render_field(form.username) }}
							</div>
						</div>
						<div class="form-group">
							<label for="password" class="col-sm-offset-2 col-sm-2 control-label"></label>
							<div class="col-sm-5">
                                    {{ render_field(form.password) }}
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-4 col-sm-5">
								<button id="submitBtn" type="submit" class="btn btn-default btn-block btn-primary"></button>
                                    {{ form.submit1 }}
							</div>
						</div>
						</form>
			</div>
			<div class="modal-footer">
			</div>
		</div>
		<!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script type="text/javascript">
$(function(){

	$(".tbox").click(function(){
		$('#myModal1').modal('show') //显示模态框
	})
	
});
</script>


</body>
</html>